<template>
  <div>
    <Table :loading="loading" :columns="columns" :data="listData">
      <template slot-scope="{ row,index }" slot="userState">
        <i-switch
          size="large"
          v-model="listData[index].manage_state"
          @on-change="changeState(index)"
        >
          <span slot="open">启用</span>
          <span slot="close">停用</span>
        </i-switch>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="edit(index)">编辑</Button>
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>

    <Modal
    v-model="isEdit"
    title="编辑管理员"
    :footer-hide="true"
    :width="60"
    @on-cancel="onCancel"
    :styles="{top: '0'}">
      <edit-frm ref="editForm" :editUser="editUser" @edit-sumit="editSumbit"></edit-frm>
    </Modal>
  </div>
</template>

<script>
import { setManageState, delManageUser, editManageUser } from '@/api/manage'
import editFrm from '../edit/index.vue'
export default {
  name: '',
  components: {
    editFrm
  },
  props: {
    pageNum: Number,
    loading: Boolean,
    listData: Array
  },
  data () {
    return {
      isEdit: false,
      editSuccess: true,
      editUser: {},
      columns: [
        {
          title: '编号',
          key: 'id',
          align: 'center',
          width: '85'
        },
        {
          title: '团队名称',
          align: 'center',
          key: 'team_name'
        },
        {
          title: '昵称',
          align: 'center',
          key: 'manage_name'
        },
        {
          title: '手机号',
          align: 'center',
          key: 'manage_phone'
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'create_time'
        },
        {
          title: '更新时间',
          align: 'center',
          key: 'update_time'
        },
        {
          title: '创建IP',
          align: 'center',
          key: 'create_ip'
        },
        {
          title: '状态',
          align: 'center',
          slot: 'userState'
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action'
        }
      ]
    }
  },
  methods: {
    changeState (index) {
      const manage_id = this.listData[index].manage_id
      const setAction = this.listData[index].manage_state === true ? 'start' : 'stop'
      setManageState({ manage_id, setAction })
        .then(res => {
          const data = res.data
          if (data.code === 200) {
            this.listData[index].manage_state = data.data.manage_state
            this.$Message.success(data.message)
          } else {
            this.$Message.error(data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error('操作失败')
        })
    },
    edit (index) {
      this.listData[index].manage_pass = ''
      this.editUser = this.listData[index]
      this.isEdit = true
    },
    remove (index) {
      const manage_id = this.listData[index].manage_id
      delManageUser(manage_id)
        .then(res => {
          const data = res.data
          if (data.code === 200) {
            this.listData.splice(index, 1)
            this.$Message.success(res.data.message)
          } else {
            this.$Message.error(data.error)
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error('操作失败')
        })
    },
    editSumbit (formData) {
      editManageUser(formData).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.$Message.success(data.message)
          this.isEdit = false
          this.$refs.editForm.success()// 编辑成功
          this.editUser = {}
          this.onCancel()
        } else {
          this.$Message.error(data.error)
          this.$refs.editForm.fail()
        }
      }).catch(err => {
        console.log(err)
        this.$Message.error('编辑失败')
        this.$refs.editForm.fail()
      })
    },
    onCancel () {
      this.$emit('edit-call')
    }
  }
}
</script>

<style lang="" scoped>
</style>
